<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit"/>
    <meta name="force-rendering" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
    <title>Summary</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=no">
    <#include "/include/new_resource.html"/>
    <style>
        .uploadFile {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            z-index: 2;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="summary-box">
        <div class="hd">
            <h3>Summary</h3>
            <div class="btns g-button-wrap">
                <button class="back" type="button" onclick="back();">Back</button>
                <button class="create-button" type="button" onclick="save();">Save</button>
            </div>
        </div>
        <div class="bd">
            <form id="templateForm" role="form" action="${base}/admin/template/save" method="post">
                <input type="hidden" id="id" name="id" value="${(template.id?c)!}">
                <input type="hidden" name="img1" value="">
                <input type="hidden" name="img2" value="">
                <input type="hidden" name="img3" value="">
                <input type="hidden" name="img4" value="">
                <input type="hidden" name="img5" value="">
                <input type="hidden" name="clientName" value="${template.clientName!}">
                <input type="hidden" name="photoStyle" value="${template.photoStyle!}">
                <input type="hidden" name="lightingStyle" value="${template.lightingStyle!}">
                <input type="hidden" name="sceneStyle" value="${template.sceneStyle!}">
                <input type="hidden" name="productCategory" value="${template.productCategory!}">
                <div class="information item">
                    <div class="title g-title">
                        <h3>Basic Information</h3>
                    </div>
                    <div class="content">
                        <div class="stetup-photos">
                            <div class="photos-wrap">
                                <div class="img">
                                    <input type="file" class="uploadFile" name="mainFile" accept="image/*"
                                           id="mainUpload" multiple="">
                                    <input type="hidden" name="img" id="mainUploadImgInput" value="${template.img!}">
                                    <img src="${base}${template.img!}" id="mainUploadImg" alt="">
                                </div>
                            </div>
                            <div class="optional">
                                <div class="tit">Setup Photos (Optional)</div>
                            </div>
                            <div class="photos-list ">
                                <div class="file">
                                    <input type="file" name="file" accept="image/*" id="upload" multiple="">
                                    <div class="desc">
                                        <div class="box">
                                            <p class="t1">Drag and drop images here</p>
                                            <p class="t2">- or -</p>
                                            <p class="t3">Browse files from your computer</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="content-img scrollBox">
                                    <ul class="content-img-list ">
                                        <li>
                                            <div class="img">
                                                <img src="images/img_02.png" alt="">
                                            </div>
                                        </li>
                                        <li>
                                            <div class="img">
                                                <img src="images/img_03.png" alt="">
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="info">
                            <div class="g-parameter">
                                <ul>
                                    <li>
                                        <div class="tit">
                                            ID
                                        </div>
                                        <div class="content">
                                            <p id="id_p">${template.id!}</p>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Name
                                        </div>
                                        <div class="content">
                                            <div class="input-box">
                                                <input type="text" name="name" value="${template.name!}"
                                                       placeholder="Enter parameter name"/>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Client
                                        </div>
                                        <div class="content">
                                            <div class="input-box">
                                                <div id="select-client" class="xm-select-item"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Product Category
                                        </div>
                                        <div class="content">
                                            <div class="input-box">
                                                <div id="select-productCategory" class="xm-select-item"></div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Background Style
                                        </div>
                                        <div class="content">
                                            <div class="input-radio">
                                                <label class="g-radio">
                                                    <input type="radio"
                                                           <#if ((template.photoType)!"")=="White">checked</#if>
                                                           name="photoType" value="White"/>
                                                    <i></i>
                                                    <span>White</span>
                                                </label>
                                                <label class="g-radio">
                                                    <input type="radio"
                                                           <#if ((template.photoType)!"")=="Creative">checked</#if>
                                                           name="photoType" value="Creative"/>
                                                    <i></i>
                                                    <span>Creative</span>
                                                </label>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Props
                                        </div>
                                        <div class="content">
                                            <div class="input-radio">
                                                <label class="g-radio">
                                                    <input type="radio"
                                                           <#if ((template.props)!"")=="Included">checked</#if>
                                                           name="props" value="Included"/>
                                                    <i></i>
                                                    <span>Included</span>
                                                </label>
                                                <label class="g-radio">
                                                    <input type="radio"
                                                           <#if ((template.props)!"")=="Not included">checked</#if>
                                                           name="props" value="Not included"/>
                                                    <i></i>
                                                    <span>Not included</span>
                                                </label>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="tit">
                                            Notes (Optional)
                                        </div>
                                        <div class="input-textarea">
                                            <textarea class="text" name="memo"
                                                      placeholder="Enter notes">${template.memo!}</textarea>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                            <div class="g-style-list">
                                <div class="style-left">
                                    <ul>
                                        <li>
                                            <div class="tit">
                                                Photo Style
                                            </div>
                                            <div class="content">
                                                <div class="input-box">
                                                    <div id="select-photoStyle" class="xm-select-item"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="tit">
                                                Lighting Style
                                            </div>
                                            <div class="content">
                                                <div class="input-box">
                                                    <div id="select-lightingStyle" class="xm-select-item"></div>
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <div class="tit">
                                                Scene Style
                                            </div>
                                            <div class="content">
                                                <div class="input-box">
                                                    <div id="select-sceneStyle" class="xm-select-item"></div>
                                                </div>
                                            </div>
                                        </li>

                                    </ul>

                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="edit-button">
                        <a class="g-button-style" onclick="editCanvas();" href="javascript:void(0)" type="button"
                           style="width: 120px;padding: 10px;cursor: pointer;">Edit Canvas</a>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<!-- 遮罩层 -->
<div class="shade"></div>
<#include "/include/new_js_resource.html"/>
<script src="${base}/static/js/uploadimg.js?vno=11" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    let baseUrl = '${base}';
    let clientName_select;
    let productCategory_select;
    let photoStyle_select;
    let lightingStyle_select;
    let sceneStyle_select;
    let img1 = '${template.img1!}';
    let img2 = '${template.img2!}';
    let img3 = '${template.img3!}';
    let img4 = '${template.img4!}';
    let img5 = '${template.img5!}';
    initImgs(img1);
    initImgs(img2);
    initImgs(img3);
    initImgs(img4);
    initImgs(img5);
    addNewContent(imgBox);

    function back() {
        if (document.referrer.indexOf("svg/operate") > 0) {
            HF.goto('${base}/admin/parameters/my_index')
        } else {
            history.back();
        }

    }

    function initImgs(img) {
        if (img) {
            imgFile.push(img);
            imgSrc.push(baseUrl + img);
            imgName.push(img);
            imgUploadUrl.push(img);
        }
    }

    function save(postHandler) {
        imgUploadUrl.forEach(function (obj, i) {
            $("input[name='img" + (i + 1) + "']").val(obj);
        })
        let clientName_ss = getSelectCompanyValue(clientName_select)
        let productCategory_ss = getSelectValue(productCategory_select);
        let photoStyle_ss = getSelectValue(photoStyle_select);
        let lightingStyle_ss = getSelectValue(lightingStyle_select);
        let sceneStyle_ss = getSelectValue(sceneStyle_select);
        $("input[name='clientName']").val(clientName_ss);
        $("input[name='productCategory']").val(productCategory_ss);
        $("input[name='photoStyle']").val(photoStyle_ss);
        $("input[name='lightingStyle']").val(lightingStyle_ss);
        $("input[name='sceneStyle']").val(sceneStyle_ss);

        HF.ajaxFormSubmit('templateForm', function (result) {
            $("#id_p").html(result);
            $("input[name='id']").val(result);
            if (postHandler && typeof postHandler == 'function') {
                postHandler(result);
            } else
                HF.Alert("Save Success");
            // document.location.reload();
        }, function (e) {
            HF.Alert("Save Failure");
        });
    }

    function pushImg(obj) {
        var url = '${base}' + "/admin/parameters/mainImgeUpload";
        var files = $("#mainUpload").get(0).files[0]; //获取file控件中的内容
        var fd = new FormData();
        fd.append("uploadFile", files);
        $.ajax({
            type: "POST",
            contentType: false, //必须false才会避开jQuery对 formdata 的默认处理 , XMLHttpRequest会对 formdata 进行正确的处理
            processData: false, //必须false才会自动加上正确的Content-Type
            url: url,
            data: fd,
            success: function (msg) {

                var obj = eval('(' + JSON.stringify(msg) + ')');

                if (obj.SUCESS) {
                    let url = '${base}' + obj.DATA;
                    //填充图片
                    $("#mainUploadImg").attr("src", url);
                    //写入隐藏域
                    $("#mainUploadImgInput").val(obj.DATA);
                }
            },
            error: function (msg) {
                //debugger;
                HF.Alert("error");
            }
        });
    }

    $(function () {

        $(".scrollBox").scrollBar();

        HF.api.get("${base}/api/parameters/company", {}).then(function (data) {
            let clientName = '${template.clientName!}';
            // if (clientName && clientName.length > 0) {
            //     data.forEach(d => {
            //         if (clientName.indexOf(d.value) != -1) {
            //             d.selected = true;
            //         }
            //     })
            // }

            clientName_select = xmSelect.render({
                el: '#select-client',
                prop: {
                    name: 'name',
                    value: 'name',
                },
                filterMethod: function (val, item, index, prop) {
                    if (val.toUpperCase() == item.name.toUpperCase()) {//把value相同的搜索出来
                        return true;
                    }
                    if (item.name.toUpperCase().indexOf(val.toUpperCase()) != -1) {//名称中包含的搜索出来
                        return true;
                    }
                    return false;//不知道的就不管了
                },
                paging: true,
                language: 'en',
                filterable: true,
                tips: 'Search client name',
                data: data
            });
            if (clientName && clientName.length > 0) {
                var clientNames = clientName.split("$$");
                var inValues = [];
                clientNames.forEach(function (name) {
                        inValues.push({name: name, value: name})
                    }
                )
                clientName_select.setValue(inValues);

            }

        });
        initXSelect("ProductCategory", "productCategory", function (data) {
            productCategory_select = xmSelect.render({
                el: '#select-productCategory',
                language: 'en',
                tips: 'Search productCategory',
                filterable: true,
                data: data
            });
        })
        initXSelect("PhotoStyle", "photoStyle", function (data) {
            photoStyle_select = xmSelect.render({
                el: '#select-photoStyle',
                language: 'en',
                tips: 'Search photoStyle',
                filterable: true,
                data: data
            });
        })
        initXSelect("LightingStyle", "lightingStyle", function (data) {
            lightingStyle_select = xmSelect.render({
                el: '#select-lightingStyle',
                language: 'en',
                tips: 'Search lightingStyle',
                filterable: true,
                data: data
            });
        })
        initXSelect("SceneStyle", "sceneStyle", function (data) {
            sceneStyle_select = xmSelect.render({
                el: '#select-sceneStyle',
                language: 'en',
                tips: 'Search sceneStyle',
                filterable: true,
                data: data
            });
        })


    })

    function initXSelect(service, catagory, handle) {
        HF.api.get("${base}/api/parameters/options/" + service, {}).then(function (data) {
            let clientName = $("input[name='"+catagory+"']").val();
            if (clientName && clientName.length > 0) {
                data.forEach(function (d) {
                    if (clientName.indexOf(d.value) != -1
                    ) {
                        d.selected = true;
                    }
                })
            }
            handle(data)
        });
    }

    function getSelectValue(category) {
        let objects = category.getValue();
        let values = "";
        if (objects.length > 0) {
            values = objects.reduce(function (prev, cur) {
                    if (prev && prev.length > 0
                    ) {
                        return prev + "," + cur.value;
                    } else {
                        return cur.value;
                    }
                },
                ""
            )
        }
        return values;
    }

    function getSelectCompanyValue(category) {
        let objects = category.getValue();
        let values = "";
        if (objects.length > 0) {
            values = objects.reduce(function (prev, cur) {
                    if (prev && prev.length > 0
                    ) {
                        return prev + "$$" + cur.name;
                    } else {
                        return cur.name;
                    }
                },
                ""
            )
        }
        return values;
    }

    function editCanvas() {
        var url = "${base}/svg/operate?option=edit&id=";
        save(function (id) {
            HF.goto(url + id);
        })


    }
</script>
</body>

</html>




